<button nz-button [nzType]="btnType" (click)="showModal()" style="margin: 1px 10px 0 0;">
    <ng-content></ng-content>
</button>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzWidth]="1000" [nzContent]="modalContent"
    [nzFooter]="modalFooter" (nzOnCancel)="isVisible = false">
    <ng-template #modalTitle>
        <h3 style="font-size: 22px;color: #0196ff;">汇报表</h3>
    </ng-template>
    <ng-template #modalContent>
        <nz-spin [nzSpinning]="submitting">
            <form class="clearfix" nz-form nzLayout="vertical" [formGroup]="validateForm">
                <nz-form-item class="tac">
                    <nz-form-label nzRequired></nz-form-label>
                    <nz-form-control class="big-bold" [nzErrorTip]="siteErrTpl">
                        昆明南电务段关于
                        <nz-date-picker nzFormat="yyyy年MM月dd日" style="width:145px;" formControlName="emerDate"
                            [nzDisabled]="readOnly" [(ngModel)]="submitData.emerDate"></nz-date-picker>&nbsp;
                        <input nz-input style="width:80px;" formControlName="station" placeholder="站名"
                            [readonly]="readOnly" [(ngModel)]="submitData.station">&nbsp;站紧急修天窗的情况汇报
                        <ng-template #siteErrTpl let-control>
                            <ng-container *ngIf="validateForm.get('emerDate').hasError('required')">
                                标题日期是必选项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('station').hasError('required')">
                                站名是必填项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('station').hasError('space')">
                                站名不能只输入空格！
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzRequired><span style="font-size:18px;">电务部:</span></nz-form-label>
                    <nz-form-control [nzErrorTip]="esErrTpl">
                        <textarea nz-input cols="5" rows="2" formControlName="header" [readonly]="readOnly"
                            [(ngModel)]="submitData.header"></textarea>
                        <ng-template #esErrTpl let-control>
                            <ng-container *ngIf="validateForm.get('header').hasError('required')">
                                电务部是必填项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('header').hasError('space')">
                                电务部不能只输入空格！
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzRequired><span style="font-size:18px;">一、设备检查情况</span></nz-form-label>
                    <nz-form-control [nzErrorTip]="inspectionErrTpl">
                        <textarea nz-input cols="5" rows="3" formControlName="devInfo" [readonly]="readOnly"
                            [(ngModel)]="submitData.devInfo"></textarea>
                        <ng-template #inspectionErrTpl let-control>
                            <ng-container *ngIf="validateForm.get('header').hasError('required')">
                                电务部是必填项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('header').hasError('space')">
                                电务部不能只输入空格！
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzRequired><span style="font-size:18px;">二、紧急修申请、处理情况</span></nz-form-label>
                    <nz-form-control [nzErrorTip]="emergErrTpl">
                        <textarea nz-input cols="5" rows="5" formControlName="handleInfo" [readonly]="readOnly"
                            [(ngModel)]="submitData.handleInfo"></textarea>
                        <ng-template #emergErrTpl let-control>
                            <ng-container *ngIf="validateForm.get('handleInfo').hasError('required')">
                                处理情况是必填项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('handleInfo').hasError('space')">
                                处理情况不能只输入空格！
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzRequired><span style="font-size:18px;">三、紧急修申报原因</span></nz-form-label>
                    <nz-form-control [nzErrorTip]="declareErrTpl">
                        <textarea nz-input cols="5" rows="3" formControlName="reason" [readonly]="readOnly"
                            [(ngModel)]="submitData.reason"></textarea>
                        <ng-template #declareErrTpl let-control>
                            <ng-container *ngIf="validateForm.get('reason').hasError('required')">
                                申报原因是必填项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('reason').hasError('space')">
                                申报原因不能只输入空格！
                            </ng-container>
                        </ng-template>>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzRequired><span style="font-size:18px;">四、考核建议</span></nz-form-label>
                    <nz-form-control [nzErrorTip]="suggestErrTpl">
                        <textarea nz-input cols="5" rows="3" formControlName="punishSuggest" [readonly]="readOnly"
                            [(ngModel)]="submitData.punishSuggest"></textarea>
                        <ng-template #suggestErrTpl let-control>
                            <ng-container *ngIf="validateForm.get('punishSuggest').hasError('required')">
                                考核建议是必填项!
                            </ng-container>
                            <ng-container *ngIf="validateForm.get('punishSuggest').hasError('space')">
                                考核建议不能只输入空格！
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <div style="float:right;">
                    <nz-form-item>
                        <nz-form-label nzRequired>昆明南电务段</nz-form-label>
                        <nz-form-control [nzErrorTip]="signatureErrTpl">
                            <nz-date-picker nzFormat="yyyy年MM月dd日" style="width:145px;" formControlName="reportDate"
                                [nzDisabled]="readOnly" [(ngModel)]="submitData.reportDate"></nz-date-picker>
                            <ng-template #signatureErrTpl let-control>
                                <ng-container *ngIf="validateForm.get('reportDate').hasError('required')">
                                    签署日期是必选项!
                                </ng-container>
                            </ng-template>>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </form>
        </nz-spin>
    </ng-template>
    <ng-template #modalFooter>
        <ng-container *ngIf="!!queryId">
            <button nz-button nzType="primary" (click)="readOnly=!readOnly"
                [disabled]="btnType=='primary'">{{readOnly ? '修改' : '查看'}}
            </button>
            <button nz-button nzType="primary" (click)="export(apiIdentity)">导出</button>
        </ng-container>
        <button nz-button nzType="primary" [disabled]="!validateForm.valid||readOnly"
            (click)="submitForm(validateForm.value)">提交
        </button>
    </ng-template>
</nz-modal>